<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改订单管理')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-order-edit" th:object="${order}">
            <input name="orderId" th:field="${order.orderId}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">车辆编号：</label>
                <div class="col-sm-8">
                    <input name="carId" th:field="${car.carId}" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">车牌号：</label>
                <div class="col-sm-8">
                    <input name="carLisenseNum" th:field="${car.carLisenseNum}" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">车辆型号：</label>
                <div class="col-sm-8">
                    <input name="carModel" th:field="${car.carModel}" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">车辆颜色：</label>
                <div class="col-sm-8">
                    <input name="carColor" th:field="${car.carColor}" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">客户编号：</label>
                <div class="col-sm-8">
                    <input name="custNo" th:field="${customer.custNo}" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">客户姓名：</label>
                <div class="col-sm-8">
                    <input name="custName" th:field="${customer.custName}" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">客户手机号：</label>
                <div class="col-sm-8">
                    <input name="custPhone" th:field="${customer.custPhone}" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">租车时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input id="rentTime" name="rentTime" th:value="${#dates.format(order.rentTime, 'yyyy-MM-dd HH:mm')}" class="form-control" placeholder="yyyy-MM-dd HH:mm" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">预计还车时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input id="expectReturnTime" name="expectReturnTime" th:value="${#dates.format(order.expectReturnTime, 'yyyy-MM-dd HH:mm')}" class="form-control" placeholder="yyyy-MM-dd HH:mm" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">按天单价：</label>
                <div class="col-sm-8">
                    <input name="dayPrice" th:field="${order.dayPrice}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">超时单价/时：</label>
                <div class="col-sm-8">
                    <input name="delayHourPrice" th:field="${order.delayHourPrice}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">超时单价/天：</label>
                <div class="col-sm-8">
                    <input name="delayDayPrice" th:field="${order.delayDayPrice}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">押金：</label>
                <div class="col-sm-8">
                    <input name="deposit" th:field="${order.deposit}" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "lease/order";

        jQuery.validator.addMethod("dateCheck", function() {
            var startDate = $('#rentTime').val();
            var endDate = $('#expectReturnTime').val();
            try {
                var startTimeDate = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
                var endTimeDate = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
                if (endTimeDate > startTimeDate) {
                    return true
                } else {
                    return false
                }
            } catch (e) {
                return false
            }
        });
        jQuery.validator.addMethod("dateCheck1", function() {
            let startDate = $('#rentTime').val();
            if (startDate == ''){
                return false
            }
            try {
                let startTimeDate = new Date(Date.parse(startDate.replace(/-/g, "/"))).getTime();
                if (startTimeDate) {
                    return true
                } else {
                    return false
                }
            } catch (e) {
                return false
            }
        });
        jQuery.validator.addMethod("dateCheck2", function() {
            let endDate = $('#expectReturnTime').val();
            if (endDate == '') {
                return false
            }
            try {
                let TimeDate = new Date(Date.parse(endDate.replace(/-/g, "/"))).getTime();
                if (TimeDate) {
                    return true
                } else {
                    return false
                }
            } catch (e) {
                return false
            }
        });
        $("#form-order-edit").validate({
            focusCleanup: true,
            rules: {
                rentTime: {
                    dateCheck1: true,
                },
                expectReturnTime: {
                    dateCheck2: true,
                    dateCheck: true
                },
                dayPrice: "required",
                delayHourPrice: "required",
                delayDayPrice: "required",
                deposit: "required",
            },
            messages: {
                rentTime: {
                    dateCheck1: icon + "请选择租出时间"
                },
                expectReturnTime: {
                    dateCheck2: icon + "请选择预计还车时间",
                    dateCheck: icon + "预计还车时间需大于租出时间"
                },
                dayPrice: icon + "请输入按天单价",
                delayHourPrice: icon + "请输入超时单价/时",
                delayDayPrice: icon + "请输入超时单价/天",
                deposit: icon + "请输入押金",
            }
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-order-edit').serialize());
            }
        }

        $("#rentTime").datetimepicker({
            format: "yyyy-mm-dd hh:ii",
            autoclose: true
        });

        $("#expectReturnTime").datetimepicker({
            format: "yyyy-mm-dd hh:ii",
            autoclose: true
        });
    </script>
</body>
</html>